<template>
  <div style="width:100%;height:100%;"></div>
</template>

<script>
import echarts from "echarts";
export default {
  data () {
    return {

    }
  },
  props: {
    chartFun: {
      type: Function
    },
    url: {
      type: String,
      default: ''
    }
  },
  methods: {
    setDefault () {
      let option = this.chartFun();
      this.charts.setOption(option);
    }
  },
  mounted () {
    this.charts = echarts.init(this.$el, "light");
    let vm = this;
    vm.$nextTick(() => {
      window.addEventListener("resize", () => {
        vm.charts.resize();
      });
    });
    vm.charts.on("mouseout", params => {
      this.$emit("chartsMouseout", params);
    });
    vm.charts.on("mouseover", params => {
      this.$emit("chartsMouseover", params);
    });
    this.setDefault()
  },
  destroyed () {
    if (this.request) {
      this.request.abort()
    }
  }
};
</script>
